<template>
	<view class="my-lists">
		<!-- 左侧商品图片单选按钮 -->
		<view class="box-left">
			<radio color="#c00000" :checked="goodsItem.goods_state" v-if="showRadio"
				@click="radioClick(goodsItem.goods_id)" />
			<image class="box-left-img"
				:src="goodsItem.goods_small_logo ? goodsItem.goods_small_logo : '../../static/nothing.png'"
				@click="goToDetailsPage(goodsItem.goods_id)"></image>
		</view>
		<!-- 右侧商品信息价格 -->
		<view class="box-right">
			<view class="box-right-header" @click="goToDetailsPage(goodsItem.goods_id)">
				{{goodsItem.goods_name}}
			</view>
			<view class="box-right-body">
				<text>￥{{goodsItem.goods_price | formatPrice}}</text>
				<!-- 动态展示数字框 -->
				<uni-number-box v-if="showNumberBox" min="1" :value="goodsItem.goods_number"
					@change="changeNum(goodsItem.goods_id,$event)"></uni-number-box>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex'
	export default {
		name: "my-lists",
		data() {
			return {

			};
		},
		props: ['goodsItem', 'showRadio', 'showNumberBox'],
		filters: {
			// 格式化价格样式
			formatPrice(price) {
				return Number(price).toFixed(2);
			}
		},
		methods: {
			// 跳转到详情页
			goToDetailsPage(id) {
				uni.navigateTo({
					url: `/subpage/details/details?goods_id=${id}`
				})
			},
			// 改变单选按钮状态
			radioClick(id) {
				this.$emit('radioStateEvent', id);
			},
			// 改变商品数量
			changeNum(id,number) {
				const goodsData = {
					goods_id: id,
					goods_number: number,
				};
				this.$emit("goodsNumberEvent", goodsData);
			}
		}
	}
</script>

<style lang="less">
	.my-lists {
		width: 100%;
		padding: 10px 5px;
		display: flex;
		border-bottom: 1px solid #efefef;
		box-sizing: border-box;

		.box-left {
			height: 100%;
			margin-right: 5px;
			display: flex;
			align-items: center;

			.box-left-img {
				width: 100px;
				height: 100px;
				display: block;
			}
		}

		.box-right {
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.box-right-header {
				font-size: 26rpx;
			}

			.box-right-body {
				display: flex;
				justify-content: space-between;
				color: #c00000;
			}
		}

	}
</style>
